<template>
   <ul class="leftImg-rightTxt">
          <li v-for="(item,i) in TrafficGuide" :key="i">
            <router-link to>
              <div class="img-box">
                <img :src="item.src" alt />
              </div>
              <div class="text-box">
                <p class="title">{{item.title}}</p>
                <div class="content multi-line">{{item.content}}</div>
                <div class="tag">
                    <span class="author">{{item.author}}/{{item.time}}</span>
                    <span class="num">
                        <img src="../../assets/images/icon-browse.png" alt="">
                        {{item.num}}
                    </span>
                </div>
              </div>
            </router-link>
          </li>
        </ul>
</template>

<script>
export default {
    name:'trafficGuide',
    props:{
        TrafficGuide:Array
    },
    data(){
        return{

        }
    }
}
</script>

<style lang="scss" scoped>
.leftImg-rightTxt {
  > li {
    display: inline-block;
    width: 590px;
    padding: 16px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    &:nth-of-type(2n) {
      margin-right: 0;
    }
    >a{
        display: block;
        display: flex;
        .img-box{
            width:158px;
            height:128px;
            overflow: hidden;
            margin-right:10px;
        }
        .text-box{
            flex:1;
            display: flex;
            flex-direction:column;
            justify-content:space-between;
            .title{
                font-size: 16px;
                font-weight: bold;
                color:#333;
            }
            .content{
                font-size: 14px;
                color: #999;
                line-height: 2;
            }
            .tag{
                font-size:12px;
                color:#999;
                text-align:right;
                .num{
                    margin-left:15px;
                    >img{
                        display: inline-block;
                        width:18px;
                    }
                }
            }
        }
    }
  }
}
</style>